<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="<c:url value="/css/bootstrap.min.css"/>">
    <!-- 引入JQuery  bootstrap.js-->
    <script src="<c:url value="/js/jquery-3.2.1.min.js"/>"></script>
    <script src="<c:url value="/js/bootstrap.min.js"/>"></script>
    <style type="text/css">
        body {
            background-size: 100% 100%;
            background-image: url("images/a.jpg");
            height: 1080px;
            width: 1920px;
            background-repeat: no-repeat;
        }

        #login-box {
            /*border:1px solid #F00;*/
            padding: 35px;
            border-radius: 15px;
            background: #56666B;
            color: #fff;
        }

    </style>
</head>
<body>
<div class="container" id="top">
    <div class="row" style="margin-top: 280px; ">
        <div class="col-md-4"></div>
        <div class="col-md-4" id="login-box" style="background-color: #82a9bc">
            <form class="form-horizontal" role="form" action="<c:url value="/login"/>" id="from1" method="post">
                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="userID" placeholder="username" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="password" placeholder="password"
                               name="password">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">验证码</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="code" placeholder="验证码"
                               name="code"><br>
                        <img id="exchangecode" src="${pageContext.request.contextPath}/login">
                        <a id="ecode" href="${pageContext.request.contextPath}/login.jsp">看不清？换一张图片</a><br>
                    </div>
                </div>
                <div class="form-group pull-right" style="margin-right: 15px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default btn-info">登录</button>
                    </div>
                </div>
                <div class="form-group pull-left" style="margin-left: 15px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="reset" class="btn btn-default btn-info">重置</button>
                    </div>
                </div>
            </form>

            <script type="text/javascript">
                window.onload = function () {
                    //获取img标签的对象
                    img = document.getElementById("exchangecode");
                    img.onclick = function () {
                        //加时间戳,避免浏览器缓存
                        var date = new Date().getTime()
                        img.src = "/login?" + date;
                    }
                    //获取a标签的对象
                    ec = document.getElementById("ecode");
                    ec.onclick = function () {
                        //加时间戳
                        var date = new Date().getTime()
                        img.src = "/login?" + date;
                    }
                }
            </script>

        </div>
        <div class="col-md-4"></div>
    </div>
</div>
</body>
</html>